<template>
  <div class="detail">
      <main>
            <!-- 轮播图区域 -->
    <van-swipe :autoplay="3000" class="swipe">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 标题区域 -->
    <h1 class="biaoti">
      <img src="" alt="">
      {{title}}
    </h1>
    <!-- 价格区域 -->
    <span class="price" >
      ￥{{res.price}}
    </span>
    <div class="price-info">
      <span class="originPrice">原价： {{res.originPrice}} </span>
      <span class="yueshou">月销售：{{res.saleNum}}</span>
    </div>
    <!-- 分割线 -->
    <van-divider
    :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 105px' }"
    >
      淘宝图文详情
    </van-divider>
    <!-- 图片展示页面 -->
    <van-image
    class="images"
      width="375"
       v-for="image in res.descContentList" :key="image.image.id" :src="image.image.url"
    />
      </main>
        <!-- 领券购买 -->
  <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="totalAmount" @click="getCar"/>
        <van-goods-action-icon icon="shop-o" text="店铺" badge="" />
        <van-goods-action-button type="warning" text="加入购物车"  @click= "addToCart" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
  </footer>
  </div>

</template>

<script>
import { getDetail } from '@/api/datail'
import { mapGetters } from 'vuex'
export default {
  name: 'Detail',
  data() {
    return {
      id: this.$route.query.id,
      res: {},
      banners: [], // 轮播图中要使用的数据
      title: '', // 标题使用的数据
    }
  },
  computed: {
    ...mapGetters(['totalAmount']),
  },

  created() {
    getDetail(this.$route.query.id)
      .then(data => {
        this.res = data.detail
        this.banners = data.detail.photo
        this.title = data.detail.qunTitle
      })
  },
  methods: {
    // 创建一个添加购物车的点击事件处理函数
    addToCart() {
      // 结构赋值当前点击商品数据
      const { id, title, image, price, introduction } = this.res
      // 将结构出来的数据保存至 curr 对象中
      const curr = {
        id,
        title,
        image,
        price,
        desc: introduction,
        amount: 1,
      }

      // 将当前选购商品保存到购物车数组中
      // 调用 mutation 方法来实现状态更新
      // 在组建中不能直接调用到 mutation 方法，而是需要调用
      // this.$store.commit('mutation方法名'，payload 接受的参数)来提交 mutation

      this.$store.commit('add', curr)
      console.log('添加成功：', this.$store.state.cart)
    },
    getCar() {
      this.$router.push('/cart')
    },
  },
}
</script>

<style lang="less" scope>
*{
  padding: 0;
  margin: 0;
}
body{
  width: 100%;
  height: 100%;
  position: relative;
}
.biaoti{
  font-size: 16px;
  font-weight: 400;
  padding: 0px 20px;
  background: url() no-repeat 15px 5px;
  background-size: 40px;
    img{
        padding-left: 35px;
      vertical-align: middle;
      width: 80px;
  }
}
.images{
  vertical-align: middle;
}
.price{
  padding-left: 25px;
}
.price-info{
  font-size: 12px;
  padding: 0px 25px;
  .originPrice{
    float: left;
  }
  .yueshou{
    float: right;
  }
}
.image{

    width: 100%;

}

</style>
